<script>
export default {
  name: "cardCarouseGuest",
  props: {
    // 是否显示面板指示点
    indicatorDots: {
      type: Boolean,
      default: true,
    },
    // 指示器颜色
    indicatorColor: {
      type: String,
      default: "#aaaaaa",
    },
    // 指示器选择颜色
    indicatorActiveColor: {
      type: String,
      default: "#000000",
    },
    // 是否自动切换
    autoplay: {
      type: Boolean,
      default: false,
    },
    // 自动切换时间间隔
    interval: {
      type: Number,
      default: 2000,
    },
    // 滑动动画时长
    duration: {
      typeof: Number,
      default: 500,
    },
    // 右边虚拟边距
    nextMargin: {
      type: Number,
      default: 60,
    },
    // 左边虚拟边距
    previousMargin: {
      type: Number,
      default: 60,
    },
    // 数据列表
    userOutLookList: {
      type: Array,
      default: () => [],
    }
  },
  data() {
    return {
      currentIndex: 0, // 当前小标
      swiperHeight: 680,
    }
  },
  computed: {
    new_icon() {
      return uni.getStorageSync('new_icon');
    },
  },
  created() {
  },
  mounted() {
    // 等待DOM渲染完成后获取高度
    this.$nextTick(() => {
      setTimeout(() => {
        this.getSwiperItemHeight();
      }, 100); // 稍微延迟确保渲染完成
    });
  },
  methods: {
    // 轮播点击
    currentChange(e) {
      this.currentIndex = e.detail.current
    },
    // 在mounted或需要时调用
    getSwiperItemHeight() {
      uni.createSelectorQuery()
          .in(this)
          .select('.recommendedGuestItem') // 选择任意一个轮播项内的元素
          .boundingClientRect(rect => {
            if (rect) {
              // 如果需要，可以同步更新swiper容器高度
              this.swiperHeight = rect.height + 40;
            }
          })
          .exec();
    },
  }
}
</script>
<template>
  <view class="cardCarousel">
    <view class="cardBox">
      <!-- 完整的联动结构 -->
      <swiper :autoplay="autoplay" :duration="duration" :indicator-active-color="indicatorActiveColor"
              :indicator-color="indicatorColor" :indicator-dots="indicatorDots"
              :interval="interval" :next-margin=" nextMargin + 'rpx' " :previous-margin="previousMargin+ 'rpx' "
              :style="{ height: swiperHeight + 'px' }" circular class="swiper" @change="currentChange">
        <swiper-item v-for="(item,GustIndex) in userOutLookList" :key="GustIndex">
          <view class="recommendedGuestItem">
            <view class="guestItemTop">
              <view class="itemTopLeft">
                <image :src="item.photo_s_url" class="recommendedImg" mode="aspectFill"></image>
              </view>
              <view class="itemTopRight">
                <view class="sex">{{ item.name_sex }}</view>
                <view class="name">{{ item.age_edu }}</view>
              </view>
            </view>
            <view class="guestItemButton">
              <view v-if="item.data !== '  -' " class="personalLst">
                <view v-for=" (persona,personaIndex) in item.data.split(',') " v-if="persona"
                      :key="personaIndex" class="personaItem"> {{ persona }}
                </view>
              </view>
              <view v-if="item.emotional_issues" class="problem">
                <view class="herPrice">
                  <image :src="new_icon.index_03" class="problemImg" mode="aspectFit"></image>
                  <text class="title">情感问题</text>
                </view>
                <p class="textP">
                  {{ item.emotional_issues }}
                </p>
              </view>
              <view v-if="item.solution" class="problem">
                <view class="herPrice">
                  <image :src="new_icon.index_04" class="problemImg" mode="aspectFit"></image>
                  <text class="title">解决方案</text>
                </view>
                <view class="liList">
                  <view class="liItem" v-html="item.solution">
                  </view>
                </view>
              </view>
            </view>
          </view>
        </swiper-item>
      </swiper>
    </view>
  </view>
</template>

<style lang="scss" scoped>
@import "cardCarouseGuest.scss";
</style>